<template>
  <view class="container">
    <!-- 活动封面图 -->
    <image :src="activity.coverImage" mode="widthFix" class="cover-image"></image>
    
    <!-- 活动信息 -->
    <view class="info-section">
      <view class="title">{{activity.title}}</view>
      <view class="creator">创建人：{{activity.creator}}</view>
      <view class="unit">所在单位：{{activity.unit}}</view>
      
      <view class="info-item">
        <text class="label">活动类别：</text>
        <text class="value">{{activity.category}}</text>
      </view>
      
      <view class="info-item">
        <text class="label">活动状态：</text>
        <text class="value status">{{activity.status}}</text>
      </view>
      
      <view class="info-item">
        <text class="label">学分值：</text>
        <text class="value credit">{{activity.credit}}</text>
      </view>
      
      <view class="info-item">
        <text class="label">举办单位：</text>
        <text class="value">{{activity.organizer}}</text>
      </view>
    </view>
    
    <!-- 项目展示 -->
    <view class="section">
      <view class="section-title">相关项目展示</view>
      <view class="project-list">
        <image v-for="(img, index) in activity.projectImages" 
               :key="index" :src="img" mode="aspectFill" 
               class="project-image"></image>
      </view>
    </view>
    
    <!-- 活动预览 -->
    <view class="section">
      <view class="section-title">活动预览</view>
      <view class="preview-content">{{activity.preview}}</view>
    </view>
    
    <!-- 活动介绍 -->
    <view class="section">
      <view class="section-title">活动介绍</view>
      <view class="description">{{activity.description}}</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activity: null
    }
  },
  onLoad(options) {
    console.log('接收到的参数:', options)
    const id = Number(options.id)
    // 模拟根据id获取活动详情
    this.activity = this.getActivityById(id)
  },
  methods: {
    getActivityById(id) {
      // 模拟活动数据
      const activities = {
        1: {
          coverImage: 'https://picsum.photos/800/400?random=1',
          title: '校园文化节',
          creator: '张三',
          unit: '学生会文化部',
          category: '文化活动',
          status: '报名中',
          credit: 2,
          organizer: '校团委',
          projectImages: [
            'https://picsum.photos/200/200?random=1',
            'https://picsum.photos/200/200?random=2',
            'https://picsum.photos/200/200?random=3'
          ],
          preview: '校园文化节是我校最具影响力的文化活动之一，包含歌唱比赛、舞蹈表演、话剧展示等多个环节...',
          description: '本届校园文化节将持续一周，设有多个分会场，学生可以根据兴趣参与不同类型的文化活动。参与活动可获得相应的文化素质学分。'
        },
        2: {
          coverImage: 'https://picsum.photos/800/400?random=2',
          title: '创新创业大赛',
          creator: '李四',
          unit: '教务处',
          category: '创新创业',
          status: '进行中',
          credit: 3,
          organizer: '创新创业学院',
          projectImages: [
            'https://picsum.photos/200/200?random=4',
            'https://picsum.photos/200/200?random=5'
          ],
          preview: '年度创新创业大赛现已开始报名，欢迎各院系学生踊跃参与...',
          description: '大赛分为初赛和决赛两个阶段，参赛项目可以是产品设计、软件开发、商业计划等多个方向。优秀项目将获得学校的创业基金支持。'
        }
      }
      
      return activities[id] || {
        coverImage: 'https://picsum.photos/800/400?random=' + id,
        title: '活动' + id,
        creator: '创建者',
        unit: '举办单位',
        category: '默认类别',
        status: '进行中',
        credit: 1,
        organizer: '主办方',
        projectImages: [
          'https://picsum.photos/200/200?random=' + (id + 1),
          'https://picsum.photos/200/200?random=' + (id + 2)
        ],
        preview: '活动预览内容...',
        description: '活动详细描述...'
      }
    }
  },
  onBackPress(options) {
    // 这里可以自定义返回按钮的行为
    console.log('用户点击了返回按钮')
    return false // 返回 true 则阻止默认返回行为
  }
}
</script>

<style>
.container {
  padding-bottom: 40rpx;
}

.cover-image {
  width: 100%;
}

.info-section {
  padding: 30rpx;
  background: #fff;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.creator, .unit {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 10rpx;
}

.info-item {
  display: flex;
  margin-top: 20rpx;
}

.label {
  color: #666;
  font-size: 28rpx;
  width: 160rpx;
}

.value {
  flex: 1;
  font-size: 28rpx;
}

.status {
  color: #007AFF;
}

.credit {
  color: #FF6B00;
}

.section {
  margin-top: 20rpx;
  padding: 30rpx;
  background: #fff;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.project-list {
  display: flex;
  flex-wrap: wrap;
}

.project-image {
  width: 220rpx;
  height: 220rpx;
  margin-right: 20rpx;
  margin-bottom: 20rpx;
  border-radius: 8rpx;
}

.preview-content, .description {
  font-size: 28rpx;
  color: #333;
  line-height: 1.6;
}
</style> 